<template>
  <div class="app-container">
    <div class="header-box">
      <div class="view-box" v-for="items in infoList.list">
        <div style="display: flex; justify-content: space-between; height: 100%">
          <div style="display: flex; flex-direction: column; height: 100%">
            <div class="info-item" :style="'background-color: ' + getThemColor(items.name)">
              <img :src="items.image" style="height: 75%; width: auto; padding: 1%" />
            </div>
            <span class="text-box" :style="'color: ' + getTextColor(items.name)">{{ items.message }}</span>
          </div>
          <div style="display: flex; flex-direction: column; align-items: center; height: 100%">
            <div class="count-text">{{ items.count }}</div>
            <div class="name-text">{{ items.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mid-box">
      <div ref="chartRef" style="width: 100%; height: 100%"></div>
    </div>
    <div class="end-box">
      <entrance-box style="width: 60%" :entrances="entrances" />
      <message-box style="width: 40%" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import EntranceBox from '@/views/home/components/entrance-box.vue'
import MessageBox from '@/views/home/components/message-box.vue'
import { getSystemList } from '@/api/login'

// 导入图片资源
import imgCollege from '@/assets/logo/我的大学.png'
import imgEducation from '@/assets/logo/分期－教育.png'
import imgTeacherManage from '@/assets/logo/教师管理.png'
import imgQuestion from '@/assets/logo/单选题.png'
import imgStudent from '@/assets/logo/学生.png'
import imgTeacherWorkspace from '@/assets/logo/教师工作台.png'
import imgDept from '@/assets/logo/学院.png'
import imgMajor from '@/assets/logo/专业.png'
import imgAutoGenerate from '@/assets/logo/自动生成.png'

const chartRef = ref(null)
let chartInstance = null
const systemList = ref({
 studentTotal: 0,
 teacherTotal: 0,
 teamTotal: 0,
 teamSelectedTotal: 0,
 collegeCount: 0,
 recentSevenDays: []
})

// 数据处理函数：将后端数据转换为 ECharts 需要的格式
function transformChartData(recentSevenDays) {
  if (!recentSevenDays || recentSevenDays.length === 0) {
    return {
      dates: [],
      studentData: [],
      teacherData: [],
      teamData: []
    }
  }

  // 格式化日期显示（10-30 或 Mon格式）
  const dates = recentSevenDays.map(item => {
    const date = new Date(item.date)
    return `${date.getMonth() + 1}-${date.getDate()}`
  })

  const studentData = recentSevenDays.map(item => item.studentCount)
  const teacherData = recentSevenDays.map(item => item.teacherCount)
  const teamData = recentSevenDays.map(item => item.teamCount)

  return { dates, studentData, teacherData, teamData }
}

// 生成 ECharts 配置
function createChartOption(chartData) {
  return {
    color: ['#22C55E', '#A855F7', '#F97316'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['学生注册', '教师注册', '团队创建']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.dates
    },
    yAxis: {
      type: 'value',
      name: '数量',
      minInterval: 1  // 确保Y轴显示整数
    },
    series: [
      {
        name: '学生注册',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(34, 197, 94, 0.8)' },
            { offset: 1, color: 'rgba(34, 197, 94, 0.1)' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: chartData.studentData
      },
      {
        name: '教师注册',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(168, 85, 247, 0.8)' },
            { offset: 1, color: 'rgba(168, 85, 247, 0.1)' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: chartData.teacherData
      },
      {
        name: '团队创建',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(249, 115, 22, 0.8)' },
            { offset: 1, color: 'rgba(249, 115, 22, 0.1)' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: chartData.teamData
      }
    ]
  }
}

function getSystemInfo() {
  getSystemList().then(res => {
      systemList.value = res

      // 更新顶部统计数据
      infoList.value.list = [
        { id: 1, name: '学院', count: systemList.value.collegeCount, message: '校内已入驻学院', image: imgCollege },
        { id: 2, name: '学生', count: systemList.value.studentTotal, message: '本系统已注册学生数', image: imgEducation },
        { id: 3, name: '教师', count: systemList.value.teacherTotal, message: '本系统已注册教师数', image: imgTeacherManage },
        { id: 4, name: '选题', count: systemList.value.teamTotal, message: ` 本系统${systemList.value.teamTotal ? Math.round((systemList.value.teamSelectedTotal / systemList.value.teamTotal) * 100) : 0}%课题已完成选择`, image: imgQuestion }
      ]

      // 更新图表数据
      if (chartInstance && res.recentSevenDays) {
        const chartData = transformChartData(res.recentSevenDays)
        const option = createChartOption(chartData)
        chartInstance.setOption(option)
      }
  })
}

// 组件挂载后初始化图表
onMounted(() => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
  }
  getSystemInfo()
})

// 组件卸载前销毁实例
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
const infoList = ref({
  list: [
    { id: 1, name: '学院', count: systemList.value.collegeCount, message: '校内已入驻学院数', image: imgCollege },
    { id: 2, name: '学生', count: systemList.value.studentTotal, message: '本系统已注册学生数', image: imgEducation },
    { id: 3, name: '教师', count: systemList.value.teacherTotal, message: '本系统已注册教师数', image: imgTeacherManage },
    { id: 4, name: '选题', count: systemList.value.teamTotal, message: ` 本系统${systemList.value.teamTotal ? Math.round((systemList.value.teamSelectedTotal / systemList.value.teamTotal) * 100) : 0}%课题已完成选择`, image: imgQuestion }
  ],
})

// 快捷入口数据
const entrances = ref([
  {
    name: '学生管理',
    icon: imgStudent,
    color: '#DBEAFE',
    path: '/student'
  },
  {
    name: '教师管理',
    icon: imgTeacherWorkspace,
    color: '#DCFCE7',
    path: '/teacher'
  },
  {
    name: '学院管理',
    icon: imgDept,
    color: '#F3E8FF',
    path: '/dept'
  },
  {
    name: '年级专业管理',
    icon: imgMajor,
    color: '#FFEDD5',
    path: '/grade'
  },
  {
    name: '分组管理',
    icon: imgAutoGenerate,
    color: '#FFEDD5',
    path: '/group'
  },
  {
    name: '志愿分配',
    icon: imgAutoGenerate,
    color: '#FFEDD5',
    path: '/allocate'
  }
])
function getThemColor(name) {
  switch (name) {
    case '学院':
      return '#DBEAFE'
    case '学生':
      return '#DCFCE7'
    case '教师':
      return '#F3E8FF'
    case '选题':
      return '#FFEDD5'
  }
}

function getTextColor(name) {
  switch (name) {
    case '学院':
      return '#3B82F6'
    case '学生':
      return '#22C55E'
    case '教师':
      return '#A855F7'
    case '选题':
      return '#F97316'
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 84px);
  background-size: cover;
  padding: 0;
  align-items: center;
  overflow-y: hidden;
}

.header-box {
  display: flex;
  justify-content: center;
  height: 15%;
  width: 100%;
  gap: 25px;
  padding: 1%;
  margin-top: 0.5%;
}

.view-box {
  height: 100%;
  background-color: white;
  width: 25%;
  border-radius: 10px;
  padding: 1%;
  padding-bottom: 0;
}

.info-item {
  display: flex;
  height: 50%;
  width: 60px;
  background-color: #dbeafe;
  padding: 2%;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.text-box {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4%;
}

.mid-box {
  background-color: white;
  width: 98%;
  height: 35%;
  border-radius: 10px;
  margin-top: 0.5%;
  display: flex;
  align-items: center;
  padding: 1%;
}

.count-text {
  font-size: 22px;
  font-weight: 550;
}

.name-text {
  font-size: 15px;
  font-weight: 600;
  color: #c0c3c8;
}

.end-box {
  display: flex;
  height: 45%;
  width: 98%;
  align-items: center;
  margin-top: 1%;
  gap: 2%;
}
</style>
